<template>
	<view>
		<baseHead title="详情" bg="#fff" color="#000" :showReturn="true"></baseHead>

		<view class="content">
			<image class="backImgCla" :src="URL + ItemObject.MobileHeaderLogo" mode=""></image>
			<view class="contentwaiceng">
				<view class="zhiboCla" v-if="ItemObject.RecruitCorpCount == 2 && ItemObject.LiveVideo == 1"
					@click="zhiboClick">
					<image src="/static/image/specialrecruitment/zhibo2.gif" mode=""></image>
					进入直播
				</view>
				<view class="jianjieCla">
					<view class="jianjieTop">
						<view class="jianjieTop1">
							<view class="">招聘企业</view>
							<view class="">{{ xiangqingObj.RecruitCorpCount }}</view>
						</view>
						<view class="xianCla"></view>
						<view class="jianjieTop1">
							<view class="">招聘职位</view>
							<view class="">{{ xiangqingObj.RecruitJobCount }}</view>
						</view>
						<view class="xianCla"></view>
						<view class="jianjieTop1">
							<view class="">招聘人数</view>
							<view class="">{{ xiangqingObj.RecruitPeopleCount }}</view>
						</view>
					</view>
					<view class="jianjieBottom">
						<view class="jianjieBottomText">
							<u-read-more ref="uReadMore" :toggle="true" :showHeight="40">
								<u-parse class="parseCla" :content="xiangqingObj.BriefIntroduction"
									@load="load"></u-parse>
								<view class="titleCla"><span>主办单位：</span><span>{{ xiangqingObj.Organizer }}</span>
								</view>
								<view class="titleCla"><span>承办单位：</span><span>{{ xiangqingObj.Undertaker }}</span>
								</view>
								<view class="titleCla"><span>举办时间：{{ StartTime + "~" + EndTime }}</span></view>
								<view class="btnCla">
									<view class="btnCla1" @click="chkanxiangqingClick">
										查看详情
									</view>
								</view>
							</u-read-more>
						</view>
					</view>
				</view>
				<view class="searchCla">
					<u-search placeholder="请输入公司名称进行搜索" v-model="keyword" :showAction="false" shape="square"
						bgColor="#FFFFFF" @search="corpListSearch" @change="corpListSearch"></u-search>
				</view>
				<view class="listCla" v-for="(item, index) in corplist" :key="index">
					<view class="listClaTop">
						<view class="listClaTopLeft">
							<image class="listClaTopLeftImg" :src="URL + item.CorpInfo.LogoPath" mode=""></image>
						</view>
						<view class="listClaTopRight">
							<view class="listClaTopRight1">{{ item.FullName }}</view>
							<view class="listClaTopRight2">
								<span v-if="item.CorpInfo.StageDesc">{{
                  item.CorpInfo.StageDesc + " | "
                }}</span>
								<span v-if="item.CorpInfo.SizeDesc">{{
                  item.CorpInfo.SizeDesc + " | "
                }}</span>
								<span v-if="item.CorpInfo.IndustryStr">{{
                  item.CorpInfo.IndustryStr
                }}</span>
							</view>
							<view class="listClaTopRight3">
								<span v-if="item.CorpInfo.CategoryDesc">{{
                  item.CorpInfo.CategoryDesc
                }}</span>
								<span v-if="item.CorpInfo.ScaleDesc">{{
                  item.CorpInfo.ScaleDesc
                }}</span>
							</view>
						</view>
					</view>

					<view class="listClaBottom" v-for="(item1, index) in item.JobInfo.Items" :key="index">
						<template v-if="index < 2">
							<view class="listClaBottomTop">
								<view class="JobNameCla">{{ item1.JobName }}</view>
								<view class="xinziCla">{{
                  item1.MinWage / 1000 + "-" + item1.MaxWage / 1000 + "K"
                }}</view>
							</view>
							<view class="listClaBottomBottom" @click="toujianliClick(item1)">
								投简历
							</view>
						</template>
					</view>
					<view class="gengduozhiweiCla" v-if="item.JobInfo.Items.length >= 2"
						@click="gengduozhiweiClick(item)">
						查看更多职位>
					</view>
				</view>
				<view class="bottomCla"></view>
			</view>
		</view>
		<u-popup :show="show" @close="close">
			<view class="popupCla">
				<view class="popup-title"> 职位 </view>
				<scroll-view scroll-y="true" style="height: 758rpx">
					<view class="popup-text" v-for="(item1, index) in zhiweiList" :key="index">
						<view class="textCla">
							<view class="JobNameCla">{{ item1.JobName }}</view>
							<view class="xinziCla">{{
                item1.MinWage / 1000 + "-" + item1.MaxWage / 1000 + "K"
              }}</view>
						</view>
						<view class="listClaBottomBottom" @click="toujianliClick(item1)">
							投简历
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-modal :show="modalShow" :content='content' :showCancelButton='true' @confirm="confirmClick" @cancel="cancelClcik" :closeOnClickOverlay="true" @close="closeClick"></u-modal>
	</view>
</template>

<script>
	import {
		mapMutations
	} from "vuex";
	import baseHead from "@/pages/component/baseHead.vue";
	export default {
		data() {
			return {
				URL: this.$config.domain.staticUrl,
				keyword: "",
				ItemObject: {}, //onLoad传来的数据
				xiangqingObj: {},
				StartTime: "",
				EndTime: "",
				PageIndex: 1,
				PageSize: 5,
				corplist: [], //查询某个招聘会所有参会企业
				show: false,
				modalShow:false,
				content:'是否向该公司投递简历！',
				JobId:'',
				zhiweiList: [],
			};
		},
		components: {
			baseHead,
		},
		onLoad(e) {
			this.ItemObject = JSON.parse(e.item);
		},
		created() {
			this.details();
			this.corpList();
		},
		methods: {
			...mapMutations(["setLiveMessage"]),
			load() {
				this.$refs.uReadMore.init();
			},

			//招聘会详情接口
			details() {
				this.$http.fairs
					.details({
						Id: this.ItemObject.Id,
					})
					.then((res) => {
						if (res.Success) {
							this.xiangqingObj = res.Result;
							this.StartTime = this.xiangqingObj.StartTime.slice(
								0,
								10
							).replaceAll("-", "/");
							this.EndTime = this.xiangqingObj.EndTime.slice(0, 10).replaceAll(
								"-",
								"/"
							);
						}
					});
			},

			//查看详情点击事件
			chkanxiangqingClick() {
				let data = this.xiangqingObj.Content.replace(/\s+/g," ")
				uni.navigateTo({
					url: "/pages/views/packageC/type-jobhunting/huodongxiangqing?content=" +
						encodeURIComponent(JSON.stringify(data)),
				});
			},

			//查询某个招聘会所有参会企业
			corpList() {
				this.$http.fairs
					.corpList({
						Id: this.ItemObject.Id,
						AuditStatus: 1,
						KeyWord: this.keyword,
						PageIndex: this.PageIndex,
						PageSize: this.PageSize,
					})
					.then((res) => {
						if (res.Success) {
							this.corplist = res.Result.Items;
						}
					});
			},
			//搜索
			corpListSearch() {
				this.corpList();
			},
			//投简历点击事件
			toujianliClick(item1) {
				let app = getApp();
				console.log(app.globalData)
				this.JobId = item1.Id
				this.modalShow = true;
			},
			//投简历弹框确认点击事件
			confirmClick(){
				let app = getApp();
				this.$http.huirc
					.inboxadd({
						JobId: this.JobId,
						ResumeId: app.globalData.userResume.Id,
						ApplyWay: 1,
						UserId: app.globalData.user.UserId,
					})
					.then((res) => {
						if (res.Success) {
							this.$util.toast(res.Message);
						} else {
							this.$util.toast(res.Message);
						}
					});
				this.modalShow = false;
			},
			
			// 投简历弹框取消点击事件
			cancelClcik(){
				this.modalShow = false;
			},
			closeClick(){
				this.modalShow = false;
			},
			
			//查看更多职位点击事件
			gengduozhiweiClick(item) {
				this.show = true;
				this.zhiweiList = item.JobInfo.Items;
			},
			close() {
				this.show = false;
				// console.log('close');
			},

			//进入直播点击事件
			zhiboClick() {
				this.setLiveMessage(this.ItemObject);
				let LiveID = this.ItemObject.LiveID;
				uni.navigateTo({
					url: "/pages/views/packageA/type-jobhunting/LiveV/index?Id=" + LiveID,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;

		.backImgCla {
			width: 100%;
			height: 338rpx;
			position: absolute;
		}

		.contentwaiceng {
			position: absolute;
			width: 100%;
			height: 100vh;

			.zhiboCla {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				margin-top: 92rpx;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 7rpx;
				font-size: 24rpx;
				font-weight: 400;
				width: 166rpx;
				height: 60rpx;
				color: #ffffff;
				position: absolute;
				left: 40%;

				image {
					width: 18rpx;
					height: 19rpx;
				}
			}

			.jianjieCla {
				width: 690rpx;
				border-radius: 10rpx;
				margin: 244rpx 30rpx 0 30rpx;
				background-color: #ffffff;

				.jianjieTop {
					display: flex;
					padding: 40rpx 20rpx 20rpx 20rpx;
					justify-content: space-around;

					.jianjieTop1 {
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					.xianCla {
						height: 67rpx;
						opacity: 0.16;
						border: 1rpx solid #707070;
					}
				}

				.jianjieBottom {
					padding: 30rpx;

					.jianjieBottomText {
						font-size: 28rpx;
						color: #999999;

						.parseCla {
							margin-bottom: 20rpx;
						}

						.titleCla {
							font-size: 26rpx;
							font-weight: 400;
							color: #000000;
							margin-top: 10rpx;
							text-indent: 0em;
						}

						.btnCla {
							display: flex;
							justify-content: center;
							margin: 43rpx 0 20rpx 0;

							.btnCla1 {
								width: 160rpx;
								height: 64rpx;
								background: #ffffff;
								border-radius: 50rpx 50rpx 50rpx 50rpx;
								opacity: 1;
								text-indent: 0em;
								border: 2rpx solid #000000;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 26rpx;
								font-weight: 400;
								color: #000000;
							}
						}
					}
				}
			}

			.searchCla {
				margin: 40rpx 30rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;

				/deep/.u-search {
					width: 690rpx;
					height: 76rpx;
				}
			}

			.listCla {
				width: 690rpx;
				margin: 0 30rpx 30rpx 30rpx;
				background: #ffffff;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.listClaTop {
					display: flex;
					margin-bottom: 20rpx;

					.listClaTopLeft {
						margin: 20rpx 0 0 20rpx;

						.listClaTopLeftImg {
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							width: 132rpx;
							height: 132rpx;
						}
					}

					.listClaTopRight {
						margin: 20rpx;
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.listClaTopRight1 {
							font-size: 30rpx;
							font-weight: bold;
							color: #000000;
						}

						.listClaTopRight2 {
							font-size: 26rpx;
							font-weight: 400;
							color: #000000;
						}

						.listClaTopRight3 {
							span {
								font-size: 24rpx;
								padding: 5rpx 10rpx;
								font-weight: 400;
								color: #000000;
								background: #f2f2f2;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								opacity: 0.66;
								margin-right: 20rpx;
							}
						}
					}
				}

				.listClaBottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 0 40rpx 0 20rpx;

					.listClaBottomTop {
						display: flex;

						.JobNameCla {
							width: 252rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.xinziCla {
							font-size: 30rpx;
							font-weight: 400;
							color: #ff000c;
							margin-left: 36rpx;
						}
					}

					.listClaBottomBottom {
						width: 160rpx;
						height: 64rpx;
						background: #ffffff;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						opacity: 1;
						border: 2rpx solid #000000;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 20rpx;
					}
				}
			}

			.bottomCla {
				height: 20rpx;
			}

			.gengduozhiweiCla {
				font-size: 24rpx;
				font-weight: 400;
				color: #175dff;
				padding-bottom: 20rpx;
				display: flex;
				justify-content: center;
			}
		}
	}

	.popupCla {
		height: 800rpx;

		.popup-title {
			display: flex;
			justify-content: center;
			margin: 10rpx 0;
			font-size: 16px;
			font-weight: bold;
		}

		.popup-text {
			padding: 20rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.textCla {
				display: flex;

				.JobNameCla {
					width: 252rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.xinziCla {
					font-size: 30rpx;
					font-weight: 400;
					color: #ff000c;
					margin-left: 36rpx;
				}
			}

			.listClaBottomBottom {
				width: 160rpx;
				height: 64rpx;
				background: #ffffff;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				opacity: 1;
				border: 2rpx solid #000000;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 20rpx;
			}
		}
	}
</style>